<html>

<head>
      <meta charset="utf-8">
      <title>canvas图片压缩</title>
      <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
      <style>
            label {
                  border: 1px solid #eee;
                  padding: 6px 10px;
                  cursor: pointer;
                  color: #666;
                  border-radius: 4px;
            }

            .preview {
                  width: 300px;
                  height: 200px;
                  border: 1px solid #eee;
            }

            li {
                  border: 1px solid #eee;
                  float: left;
                  list-style: none;
                  margin-left: 10px;
            }

            #canvas {
                  width: 400px;
                  width: 400px;
                  /* border: 1px solid #f00; */
            }
      </style>


</head>

<body>
      <h1></h1>
      <ul>
            <li>
                  <img src="2.jpg" alt="">
            </li>
            <li>
                  <canvas id="canvas"></canvas>
            </li>
            <li>
                  <img id="preview" src="">
                  <img id="source" src="2.jpg" style="display: none;" onload="imgld()">
            </li>
      </ul>
      <script>

            var canvas = document.getElementById('canvas');
            var source = document.getElementById('source');
            var preview = document.getElementById('preview');
            var sizeW = 400;
            var sizeH = 400;

            source.onload = function imgld() {


                  // var width = img_this.width, height = img_this.height;
                  // var scale = width / height;

                  // width1 = 720;
                  // height1 = parseInt(width1 / scale);

                  // var canvas = $("#cans");

                  // canvas[0].width = width1; canvas[0].height = height1;

                  // var ctx = canvas[0].getContext('2d');

                  // ctx.drawImage(img_this, 0, 0, width, height, 0, 0, width1, height1);

                  // var cropStr = canvas[0].toDataURL("image/jpeg", 0.7)


                  var width = source.width;
                  var height = source.height;
                  var scale = width / height;

                  console.log(scale);
                  

                  var context = canvas.getContext('2d');

                  //裁剪前的图片 格式
                  // var sx = (width-sizeW)/2;
                  // var sy = (height-sizeH)/2;
                  var sx = 0;
                  var sy = 0;
                  var sWidth = width;
                  var sHeight = height;

                  //裁剪后的图片 格式
                  var dx = 0;
                  var dy = 0;
                  // var dWidth = 400/scale;
                  // var dHeight = 400/scale;
                  var dWidth = 400;
                  var dHeight = dWidth/scale;

                  //图片清晰度
                  var quality = 0.8;

                  canvas.width = dWidth;
                  canvas.height = dHeight;

                  context.drawImage(source, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

                  var dataUrl = canvas.toDataURL('image/jpeg', quality);
                  preview.src = dataUrl;
            };
      </script>

</body>

</html>